<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input v-model="keyword" placeholder="请输入关键字查询"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="keywordQuery">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button disabled type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="permissions" highlight-current-row v-loading="listLoading"
              style="width: 100%;">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" width="60">
      </el-table-column>
      <el-table-column prop="name" label="名称" width="160" sortable>
      </el-table-column>
      <el-table-column prop="url" label="URL" width="280" sortable>
      </el-table-column>
      <el-table-column prop="descs" label="描述" width="180" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="权限编号" sortable>
      </el-table-column>
<!--      <el-table-column label="操作">-->
<!--        <template scope="scope">-->
<!--          <el-button disabled size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>-->
<!--          <el-button disabled type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <!--<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>-->
      <el-pagination @current-change="handleCurrentChange"
                     background
                     layout="prev, pager, next"
                     :page-size="pageSize"
                     :total="totals"
                     :current-page="currentPage" style="float:right;">
      </el-pagination>
    </el-col>

  </section>
</template>

<script>

export default {
  data() {
    return {
      //1.分页查询的相关参数
      permissions: [],  //列表数据
      pageSize: 5,      //每页显示的条数
      currentPage: 1,   //当前页
      totals: 0,        //总数量
      listLoading: false, //加载框

      //2.高级查询的相关参数
      keyword: "",

    }
  },
  methods: {
    //1.获取部门列表
    getPermissions() {
      let para = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        keyword: this.keyword
      };
      this.listLoading = true; //显示加载框
      this.$http.post("/permission", para).then(res => {
        this.permissions = res.data.data;//给数组赋值， 显示列表数据
        this.totals = res.data.totals;  //给总数量赋值， 计算分页栏
        this.listLoading = false;//关闭加载框
      }).catch(res => {
        this.$message.error("系统繁忙，请稍后重试!!!");
      })
    },
    //2.分页实现
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPermissions();
    },
    //3.高级查询实现
    keywordQuery() {
      //防止当前页不在第一页的时候，通过关键字查询，当前页没有数据
      this.currentPage = 1;
      this.getPermissions();
    },

  },
  mounted() {
    this.getPermissions();
  }
}

</script>

<style scoped>

</style>